<template>
	<view class='main'>
		<view class="user-head">
			<u-avatar level-size="90" level-icon="/static/img/community/ic_daka.png"
				:show-level="baseInfo.starFlag==='1'" mode="circle" :src="`${$store.state.img_url}${baseInfo.avatar}`" img-mode="aspectFill">
			</u-avatar>

			<view class='user-name'>{{baseInfo.nickName}}</view>
		</view>
		<view class='post-title'>{{baseInfo.title}}</view>
		<view class='post-date'>{{baseInfo.sendTime}}</view>

		<view class="divider"></view>
		<view class="report-title">选择举报原因</view>

		<u-cell-group class="report-list" title-bg-color="rgb(243, 244, 246)">
			<u-cell-item class="report-item" v-for="(item, index) in reportList" :key="index" :titleStyle="{fontWeight: 700}" :title="item.reportType" @click="clkReport(item)" />
			<!-- <u-cell-item :titleStyle="{fontWeight: 700}" title="不实信息" @click="clkReport(2)" />
			<u-cell-item :titleStyle="{fontWeight: 700}" title="辱骂,人身攻击等不友善行为" @click="clkReport(3)" />
			<u-cell-item :titleStyle="{fontWeight: 700}" title="有害信息" @click="clkReport(4)" />
			<u-cell-item :titleStyle="{fontWeight: 700}" title="涉嫌侵权" @click="clkReport(5)" /> -->
		</u-cell-group>



		<view class='dialog-container'>
			<u-modal ref="editModal" @cancel="cancelEditFolder()" @confirm="confirmEditFolder()" :show-title=false
				:showCancelButton=true v-model="showEditDialog">
				<view class="diag-input-container">
					<view>请填写举报原因</view>
					<textarea maxlength="400" class="diag-field" label-width=0 v-model="remark"
						placeholder=""></textarea>
					<text class=''>{{inputCount}}/400</text>
				</view>
			</u-modal>

			<u-top-tips ref="uTips"></u-top-tips>
		</view>
	</view>
</template>

<script>
import apis from '@/apis.js'
	export default {
		data() {
			return {
				remark: '',
				showEditDialog: false,
				reportType: "",
				itemData: {
					isVip: true,
					title: "王主任",
					postTitle: "临床病理入门讲座",
					dataStr: "2021年9月15日 15:12",
				},
				baseInfo: {},
				reportList: []
			}
		},
		methods: {
			clkReport(item) {
				this.showEditDialog = true;
				this.reportType = item.reportType
			},

			cancelEditFolder() {
				console.log("cancel");
				// this.folderName = ''
			},
			confirmEditFolder(index) {
				let action = true;
				this.$http.post(`${apis.record_add}`,{
					artId: this.baseInfo.id,
					remark: this.remark,
					reportType: this.reportType
				}).then(res => {
					if (res.data.code === 200) {
						this.remark = ""
						this.$refs.uTips.show({
							title: '举报成功',
							type: 'success',
							duration: '2300'
						})
					} else {
						this.$refs.uTips.show({
							title: '取消',
							type: 'success',
							duration: '2300'
						})
					}
				})
			},
			getReportList() {
				this.$http.get(`${apis.record_type_list}`,{
					pageNo: "1",
					pageSize: "9999999"
				}).then(res => {
					if (res.data.code === 200) {
						this.reportList = res.data.result.records
					}
				})
			},
			getList() {
				this.loadStatus='loading';
				this.$http.get(`${apis.article_detail}/${this.id}`).then(res => {
					if (res.data.code === 200) {
						this.baseInfo = res.data.result
						this.baseInfo.subjectType = res.data.result.subjectType? res.data.result.subjectType:""
					}
				})
			},
		},
		computed: {
			inputCount: function() {
				return this.remark.length;
			}
		},
		onShow() {
			this.getReportList()
			this.id = this.$route.query.id
			console.log("onshow", this.$route)
			uni.setNavigationBarTitle({
				title: '举报'
			})
			this.getList()
		},
	}
</script>

<style scoped lang="scss">
@import "uview-ui/index.scss";
	.main {
		.report-list {
			margin-top: 40rpx;
			.report-item {
				color: #212121;
			}
		}

		.report-title {
			margin-top: 31rpx;
			font-size: 31rpx;
			font-family: SimHei;
			font-weight: 400;
			line-height: 40rpx;
			color: #4D5B80;
			opacity: 1;
		}

		.divider {
			width: 100%;
			height: 0px;
			margin-top: 29rpx;
			border: 2rpx solid #BFBFBF;
			opacity: 1;
		}

		.post-title {
			margin-left: 11rpx;
			margin-top: 17rpx;
			font-size: 23rpx;
			font-family: SimHei;
			font-weight: 400;
			line-height: 31rpx;
			color: $text-color;
			opacity: 1;
		}

		.post-date {
			margin-left: 11rpx;
			margin-top: 17rpx;
			font-size: 23rpx;
			font-family: SimHei;
			font-weight: 400;
			line-height: 31rpx;
			color: $econdary-word-color;
			opacity: 1;
		}

		.user-name {
			margin-top: 20rpx;
			margin-left: 30rpx;
			font-size: $title-font;
			font-family: Source Han Sans CN;
			font-weight: 500;
			line-height: 38rpx;
			color: #4D5B80;
			opacity: 1;
		}

		.user-head {
			display: flex;
		}


		display: flex;
		flex-flow: column nowrap;
		padding: 35rpx 29rpx;
	}
</style>

<style lang='scss' scoped>
	.diag-input-container {
		display: flex;
		flex-flow: column nowrap;
		font-size: 31rpx;
		color: $u-content-color;
		padding: 20rpx 40rpx 20rpx;

		.diag-field {
			width: auto;
			text-align: left;
			margin-top: 25rpx;

			padding: 20rpx;
			height: 192rpx;
			background: #FFFFFF;
			border: 2rpx solid #4D5B80;
			opacity: 1;
			border-radius: 8rpx;
		}

		text {
			margin-top: 9rpx;
			margin-right: 16rpx;
			align-items: center;
			text-align: right;
		}
	}
</style>
